<template>
	<view class="container">

		<!-- 返回和标题 -->

		<view class="content1" v-if="order.stateId == 1">

			<view class="icon1">
				<u-icon class="icon" name="checkmark-circle" color="#fff" size="38"></u-icon>
			</view>
			<view class="status">
				待收取
			</view>

			<view class="text1">
				订单待收取，请耐心等待
			</view>
		</view>

		<view class="content1" v-if="order.stateId == 2">
			<view class="icon1">
				<u-icon class="icon" name="checkmark-circle" color="#fff" size="38"></u-icon>
			</view>
			<view class="status">
				已完成
			</view>

			<view class="text1">
				订单已完成，感谢您的使用
			</view>
		</view>

		<view class="content1" v-if="order.stateId == 3">
			<view class="icon1">
				<u-icon class="icon" name="checkmark-circle" color="#fff" size="38"></u-icon>
			</view>
			<view class="status">
				已取消
			</view>

			<view class="text1">
				订单已取消，感谢您的使用
			</view>
		</view>
		<view class="content1" v-if="order.stateId == 4">
			<view class="icon1">
				<u-icon class="icon" name="checkmark-circle" color="#fff" size="38"></u-icon>
			</view>
			<view class="status">
				等待上门
			</view>

			<view class="text1">
				骑手已接单，请耐心等待
			</view>
		</view>
		<view class="content2">
			<view class="number">
				订单号：{{order.id}}
			</view>
			<view class="time">
				预约上门时间
			</view>
			<view class="times">
				{{order.scheduledTime}}
			</view>
			<view class="member">
				<view class="avatar">
					<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width='40'
						height='40'></u--image>

				</view>
				<view class="member-name">
					回收员：郑师傅
				</view>
				<view class="member-phone">
					13304945789
				</view>
			</view>

		</view>
		<view class="content4">
			<view class="message">
				<text class="left">
					地址
				</text>
				<text class="right">
					{{order.recycleAddress}}
				</text>
			</view>
			<view class="message">
				<text class="left">
					联系人
				</text>
				<text class="right">
					{{order.userName}}
				</text>
			</view>
			<view class="message">
				<text class="left">
					联系电话
				</text>
				<text class="right">
					{{order.userPhone}}
				</text>
			</view>
		</view>

		<view class="content3">
			<view class="message">
				<text class="left">
					预估重量
				</text>
				<text class="right">
					{{order.minWeight + '-' + order.maxWeight + 'Kg'}}
				</text>
			</view>
			<view class="message">
				<text class="left">
					单价
				</text>
				<text class="right">
					￥{{ order.price }}
				</text>
			</view>
			<view class="message" v-if="order.stateId==4">
				<view class="sub-weight">
					<input class=" input" type="text" placeholder="请输入实际重量" v-model="weight">
					<text class="sub" @click="submit">
						提交
					</text>
				</view>
			</view>



		</view>
		<!-- 底部 -->

		<view class="bottom" v-if="order.stateId==4">
			<view class="bottom-left">
				<view class="money">
					<view class="money-left">
						总价
					</view>
					<view class="money-right">
						¥{{money}}
					</view>
				</view>
				<view class="check">

					<view>

						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" label="阅读并同意《拾一块回收上门条款》" name="1">
							</u-checkbox>
						</u-checkbox-group>

					</view>

				</view>

			</view>
			<view class="bottom-right">
				<u-button type="primary" text="确认支付" @click="pay"></u-button>
			</view>
		</view>




	</view>
</template>

<script>
	import OrderApi from '@/common/FindingService/OrderApi.js';
	export default {
		data() {
			return {
				checkboxValue1: [],
				onselect: '',
				zt: '',
				id: '',
				order: {},
				money: '',
				weight: '',
				recycleId: '',
				id: '',
				userId: ''

			};
		},
		onLoad(query) {
			const objString = query.obj;
			const obj = JSON.parse(decodeURIComponent(objString));
			this.receivedData = obj;
			if (this.receivedData.num == '待确认' || this.receivedData.num == '待支付') {
				this.zt = true;
			}
		},
		onLoad(options) {
			this.id = options["id"];

		},
		created() {
			this.AppointmentOrder()
			this.recycleId = uni.getStorageSync('userId');
			console.log('用户id', this.recycleId)
		},

		methods: {
			//返回
			goToBack() {
				uni.navigateTo({
					url: '/pages/invite/invite'
				})
			},
			//支付
			pay() {
				let params = {
					userId: this.userId,
					price: this.money,
					id: this.id,
					recycleId: this.recycleId
				}
				OrderApi.submitOrder(params).then(res => {
					console.log('支付结果', res)
					uni.showToast({
						title: '支付成功',
						icon: 'success',
						duration: 1000,
						success: () => {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/invite/wait/wait'
								});
							}, 1000); // 延迟1秒后跳转
						}
					});

				})

			},
			//提交重量
			submit() {
				// 在提交按钮的点击事件中，保存输入框中的内容到weight变量
				console.log(this.weight); // 可以在控制台输出weight的值
				this.money = this.order.price * this.weight
				console.log('this.money', this.money)

			},

			//选择框
			checkboxChange(n) {
				this.onselect = n
				console.log('change', this.onselect);
			},

			//预约单详情
			AppointmentOrder() {
				OrderApi.queryDetailsOrder(this.id).then(res => {
					this.order = res.data.data
					// this.id = res.data.data.id
					this.userId = res.data.data.userId
					console.log('this.id', this.id)
					console.log('this.userId', this.userId)

				})
			},
			confirm() {
				OrderApi.queryCancelOrder(this.id).then(res => {

				})

				uni.showToast({
					title: '取消成功',
					duration: 2000
				});
				this.show = false;
				this.timer = setInterval(() => {
					uni.navigateBack();
				}, 1000);

			},

		}
	}
</script>

<style lang="scss" scoped>
	//顶部标题
	.content-title {
		background-color: #fff;
		color: #000;
		font-weight: bold;
		height: 100rpx;
		position: relative;
		font-size: 16px;

		.title-left {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.title-right {
			text-align: center;
			line-height: 100rpx;
		}
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.checkbox {
		color: #000;
		background-color: #4DC88F;
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999999;
		background-color: #fff;
		height: 170rpx;
		margin: 0;
		display: flex;
		justify-content: space-evenly;
	}

	.bottom-left {
		margin-top: 30rpx;

		.money {
			display: flex;
			height: 50rpx;
			align-items: center;
			font-size: 35rpx;

			.money-left {
				height: 50rpx;
				line-height: 50rpx;
				margin-right: 20rpx;
			}

			.money-right {
				height: 50rpx;
				line-height: 50rpx;
				color: #ff0000;
				font-weight: bold;
			}

		}

		.check {
			margin-top: 10rpx;
			font-size: 20rpx;
		}

	}

	.bottom-right {

		background-color: #fff;
		font-weight: bold;
		width: 200rpx;
		display: flex;
		align-items: center;


		button {
			background-color: #ff0000;
			border: 1px solid #9999A6;
			border-radius: 40rpx;
			color: #fff;

		}
	}




	.left {
		font-weight: bold;
	}

	.container {
		height: 100vh;
		background-color: #F8F8F8;
		position: relative;
	}

	.content1 {
		background-color: #4DC88F;
		width: 100%;
		height: 300rpx;
		color: #fff;
		padding-top: 70rpx;

		.icon1 {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-bottom: 20rpx;
		}

		.status {
			width: 100%;
			text-align: center;
			font-size: 18px;
			padding-bottom: 10rpx;
		}

		.text1 {
			width: 100%;
			text-align: center;
			font-size: 12px;
		}
	}

	.content2 {
		background-color: #fff;
		width: 94%;
		position: absolute;
		top: 280rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #BFBFBF;
		padding: 0 30rpx;
		padding-bottom: 50rpx;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 20rpx;

		.number {
			margin-top: 50rpx;
			margin-bottom: 30rpx;

		}

		.time {
			font-size: 18px;
			margin-bottom: 30rpx;
		}

		.times {
			font-size: 18px;
			color: #BFBFBF;
			border-bottom: 1px solid #E7E7E7;
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
		}

		.member {
			display: flex;
			align-items: center;

			.member-name {
				margin: 0 20rpx;
			}

			.member-phone {
				margin-left: 20rpx;
				color: #4DC88F;
			}
		}

	}

	.sub {

		position: absolute;
		width: 200rpx;
		text-align: center;
		background-color: #4DC88F;
		line-height: 80rpx;
		box-shadow: -3rpx 3rpx 10rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		color: #fff;
		border-radius: 20rpx;
		top: 0;
		right: 0;
	}

	.sub-weight {
		position: relative;
		width: 100%;
	}

	.input {
		box-shadow: -3rpx 3rpx 10rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 15rpx;
		color: #000;
		height: 80rpx;
		text-align: left;
		font-size: 16px;
		padding-left: 20rpx;
		width: 100%;
	}

	.content3 {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 94%;
		background-color: #fff;
		text-align: end;
		color: #000;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin-bottom: 100rpx;


		.message {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1px solid #E7E7E7;
		}
	}

	.content4 {
		width: 94%;
		background-color: #fff;
		padding: 0 30rpx;
		margin: 0 auto;
		margin-top: 400rpx;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 20rpx;

		.message {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1px solid #E7E7E7;
		}
	}

	.content6 {

		height: 133rpx;
		position: relative;


		.cancel {
			position: absolute;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			right: 30rpx;
			top: 30rpx;

			text-align: center;
			border: 1px solid #000;


		}
	}

	.content5 {
		width: 94%;
		height: 200rpx;
		background-color: #fff;
		padding: 0 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		align-items: center;
		margin-bottom: 30rpx;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 20rpx;

		.store-right {
			width: 300rpx;
			height: 100rpx;
			display: flex;
			align-items: center;

			.store-icon {
				margin-right: 20rpx;
			}
		}



	}
</style>